Summary

Follow-up to the merged results-badge fix (#728): the same overflow existed on the form detail page, where the large hero badge rendered the raw code (6B Attachment) at text-4xl in a fixed square and clipped/wrapped it.

• Extracts the split-code badge into a shared src/components/forms/form-code-badge.tsx module (FormCodeBadge + splitFormCode), so the head/qualifier split, sizing, and accessibility handling live in one place.
• Adds a responsive hero variant (h-14 → sm:h-24) for the large detail-page badge, scaling the head across breakpoints.
• Replaces the detail-page hero badge with <FormCodeBadge variant="hero" />, and the inline code in the decision-context Current card with <FormCodeBadge variant="sm" />, so the code + qualifier read as one contained chip instead of large wrapping text.
• forms-search-results-page.tsx now imports the shared badge instead of its local copy — visual output there is unchanged.

Scope note: presentational only. It is classified clinical-risk purely because forms-search-results-page.tsx contains "search" in its name; the Clinical Governance Preflight below is completed on that basis and every listed invariant is genuinely untouched. No data, routing, retrieval, answer, ingestion, or governance behaviour changed. The accessible full-code string (sr-only) is preserved for both badges, so screen readers and text queries still see the complete code.

Verification

• npx eslint on the three changed files — clean
• npx prettier --check on the three changed files — clean
• node scripts/check-type-scale.mjs --strict — passes (no arbitrary font sizes)
• npx vitest run tests/forms.test.ts tests/forms-clipboard-fallback.test.ts — 6/6 pass
• npm run typecheck — no new errors in the changed files (pre-existing failures are all missing @testing-library/@axe-core/playwright dev deps in tests/, identical on the base branch)
• Browser QA via Playwright screenshots on the running dev server: /forms/form-6b-attachment (attachment code) at desktop + mobile shows 6B / ATTACHMENT fully contained in the hero and decision-context badges; /forms/form-10a (3-char code) and normal codes render with no regression
• UI verification not run: the npm run verify:ui gate requires @axe-core/playwright, which is not installed in this environment; verified visually with the pre-installed Chromium via playwright-core instead.

Risk and rollout

• Risk: low — presentational refactor across three forms components; extracts an existing component and swaps two render sites to it, no behavioural/data/API surface touched.
• Rollback: revert the single commit on this branch; the shared module is self-contained with no migrations or state.
• Provider or production effects: None / not applicable.

Clinical Governance Preflight

• Source-backed claims still require linked source verification before clinical use
• No patient-identifiable document workflow was introduced or expanded without explicit governance approval
• Supabase target remains Clinical KB Database (sjrfecxgysukkwxsowpy)
• Service-role keys and private document access remain server-only
• Demo/synthetic content remains clearly separated from real clinical sources
• Source metadata, review status, and outdated/unknown-source behavior remain conservative
• Deployment classification/TGA SaMD impact was checked when clinical decision-support behavior changed

Notes

• The qualifier reads in full on the desktop hero and the sm badge; on the narrow mobile hero (56px) it truncates with an ellipsis and carries a title tooltip with the full text.

🤖 Generated with Claude Code

Generated by Claude Code